<template>
  <div :style="{backgroundImage:`url(${ isLoading && backgroundColor})`}"
       class="loading-page"
  >
    <!--    loading-page     -->
    <div class="course-wrap" v-if="isLoading">
      <my-img :src="img" class-name="course-loading-pic"/>
    </div>

    <slot v-else>

    </slot>

    <loading/>

  </div>
</template>

<script>
  import { mapActions, mapState } from 'vuex'
  import { audioList } from "../../api/url.config";

  export default {
    name: "loading-page",
    props: {
      afterLoadingPage: {
        type: String,
        default: ''
      },
      backgroundColor: {
        type: String,
        default: ''
      },
      fn: {
        type: String,
        default: ''
      },
      img: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        audioList,
        isLoading: true,
        timer: 0
      }
    },
    computed: {
      ...mapState('Course', ['type_id']),
      ...mapState('Tools', ['current'])
    },
    methods: {
      ...mapActions('Tools', ['playLoadingPageVoice', 'playContentPageVoice']),
      async hideLoadingPage({ cb, fn }) {
        const { audioList, type_id, playLoadingPageVoice } = this;
        // 播放引导录音
        playLoadingPageVoice({ voicePath: audioList[type_id - 1].audio });

        this.timer = setTimeout(async () => {
          // 隐藏引导页，展示课程内容
          this.isLoading = false;
          (cb && cb()) || (fn && this.$emit('afterLoadingPage'));
        }, 3000)
      },
    },
    mounted() {
      this.hideLoadingPage({ cb: this[this.afterLoadingPage], fn: this.fn })
    },
    destroyed() {
      clearTimeout(this.timer)
    }
  }
</script>

<style lang="scss">
  @import "../../uni";

  .loading-page {
    height: 100vh;
    width: 100vw;
    background-size: 100vw 100vh;

    .course {
      &-wrap {
        min-height: 100vh;
      }
    }
  }

</style>
